<template>
  <div class="depart-tree">
    <a-spin tip="Loading..." :spinning="false" v-show="toggle">
      <a-input-search v-model="searchValue" style="margin-bottom: 1px" placeholder="请输入部门名称按回车进行搜索" @blur="getXzqh()" />
      <slot></slot>

      <a-tree v-if="visible" class="my-depart-tree" v-model="checkedKeys" selectable @select="onSelect"
        :treeData="treeData" :load-data="onLoadData" :replaceFields="{children:'children', title:'name', key:'code' }">
        
      </a-tree>
    </a-spin>
    <!-- <div class="menu-fold" :style="!toggle?{top:'0'}:''">
      <a-tooltip v-model="visible" placement="top" :title="toggle?'收起':'展开'">
        <a-icon :type="toggle?'menu-fold':'menu-unfold'" @click="setToggle" />
      </a-tooltip>
    </div> -->
  </div>
</template>

<script>
  import {
    Empty
  } from 'ant-design-vue';
  import {
    getXzqhByCode,
    getXzqhList,
    getSearchXzqh
  } from '@/api/api'
  export default {
    name: 'departTree',
    data() {
      return {
        treeData: [],
        autoExpandParent: true,
        expandedKeys: [],
        dataList: [],
        checkedKeys: [],
        checkedRows: [],
        searchValue: "",
        checkStrictly: true,
        toggle: true,
        visible: true,
        psychologList: [],
        treeMap: {
          
        }
      }
    },
    created() {
      this.getXzqh()

    },
    watch: {

    },
    computed: {

    },
    methods: {
      getXzqh() {
        this.visible = false
        if(this.searchValue) {
          getSearchXzqh({areaName: this.searchValue}).then(res => {
            if (res.success) {
              const { result } = res
              this.treeData = res.result.records
              // this.setTreeMap(res.result)
              this.visible = true
            }
          })
        } else {
          getXzqhByCode({
            codeList: [460000000000]
          }).then((res) => {
            if (res.success) {
              const { result } = res
              this.treeData = res.result
              this.setTreeMap(res.result)
              this.visible = true
            }
          })
        }
        
      },
      setTreeMap(list) {
        list.map(item => {
          this.treeMap[item.code] = item
        })
      },
      onLoadData(treeNode) {
        return new Promise(resolve => {
          if (treeNode.dataRef.children) {
            resolve();
            return;
          }
          getXzqhList({
            level: treeNode.dataRef.level + 1,
            parent: treeNode.dataRef.code
          }).then(async (res) => {
            if (res.success) {
              treeNode.dataRef.children = res.result
              this.setTreeMap(res.result)
              this.treeData = [...this.treeData];
              console.log(this.treeData)
              resolve()
            }
          })
        });
      },
      onCheck() {},
      getSelect() {
        console.log(this.checkedKeys)
        return this.checkedKeys
      },
      onSelect(key, {
        node
      }) {
        const selectedInfo = this.getSelectedTree(node.dataRef)
        this.$emit('select', {
          code: node.dataRef.code,
          treeCode:  selectedInfo.code.toString(),
          treeName:  selectedInfo.name.toString(),
        })
      },
      getSelectedTree(node, obj = {name: [], code: []}) {
        obj.name.unshift(node.name)
        obj.code.unshift(node.code)
        let result = obj
        if(node.pcode !== 0) {
          result = this.getSelectedTree(this.treeMap[node.pcode] ,result)
        }
        return result
      }
    }
  }
</script>
<style lang="less" scoped>
  .depart-tree {
    padding-bottom: 10px;
    min-height: 600px;
    margin: 6px;
    position: relative;

    .menu-fold {
      position: absolute;
      top: 42px;
      right: 4px;
    }

    // 限制部门选择树高度，避免部门太多时点击确定不便
    .my-depart-tree {
      height: calc(100vh - 120px);
      overflow-y: auto;
    }
  }
</style>
